﻿@page "/chart/date-time-axis"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of the DateTime axis in the chart, with the analysis of Alaska weather report for the year 2016.</p>
</SampleDescription>
<ActionDescription>
    <p>The DateTime axis uses the date time scale and displays the date time values as the axis label. To render DateTime axis, set <code>ValueType</code> in axis to <code>DateTime</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the DateTime axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/date-time-axis/#datetime-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Alaska Weather Statistics - 2016" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis LabelFormat="MMM" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="-20" Maximum="30" Interval="10" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelFormat="{value}°C">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Period" YName="MaxTemp" Opacity="1" Name="Warmest" Width="2" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Height="10" Width="10" Shape="ChartShape.Pentagon">
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Period" YName="MinTemp" Opacity="1" Name="Coldest" Width="2" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Height="10" Width="10" Shape="ChartShape.Diamond">
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="true"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<DateTimeData> ChartPoints { get; set; } = new List<DateTimeData>
    {
        new DateTimeData { Period = new DateTime(2016, 3, 1), MaxTemp = 6.3, MinTemp = -5.3},
        new DateTimeData { Period = new DateTime(2016, 4, 1), MaxTemp = 13.3, MinTemp = 1.0 },
        new DateTimeData { Period = new DateTime(2016, 5, 1), MaxTemp = 18.0, MinTemp = 6.9 },
        new DateTimeData { Period = new DateTime(2016, 6, 1), MaxTemp = 19.8, MinTemp = 9.4 },
        new DateTimeData { Period = new DateTime(2016, 7, 1), MaxTemp = 18.1, MinTemp = 7.6 },
        new DateTimeData { Period = new DateTime(2016, 8, 1), MaxTemp = 13.1, MinTemp = 2.6 },
        new DateTimeData { Period = new DateTime(2016, 9, 1), MaxTemp = 4.1, MinTemp = -4.9 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class DateTimeData
    {
        public DateTime Period { get; set; }
        public double MaxTemp { get; set; }
        public double MinTemp { get; set; }
    }
}
